<template>
  <textarea
     v-model="val"
     placeholder-class="color4"
     class="jk-textarea-style"
     :cursor-spacing="100"
     :adjust-position="true"
     :placeholder="placeholder"
     @input="onInput"
  ></textarea>
</template>

<script>
  export default {
    name: 'JkTextarea',
    props: {
      placeholder: {
        type: String,
        default: '请输入'
     },
      value: {
        type: [String, Number],
        default: ''
      }
    },
    data() {
      return {
        val: ''
      };
    },
    methods: {
      onInput(e) {
        this.$emit('update:value', e.detail.value);
      },
    },
    watch: {
      value(newVal) {
        this.val = newVal;
      }
    }
  }
</script>
<style lang="scss" scoped>
.jk-textarea-style {
  width: 100%;
  height: 200rpx;
  padding: 24rpx;
  border: solid 1rpx #eee;
  border-radius: 14rpx;
  box-sizing: border-box;
}
</style>
